<section class="layout float">
  <style>
    .layout.float {
      height: 800px;
      width: 80%;
      margin: 0 auto;
    }
    .layout.float div{
      height: 100%;
    }
    .layout.float .left {
      float: left;
      width: 300px;
      background-color: rgb(124, 201, 52);
    }
    .layout.float .right {
      float: right;
      width: 300px;
      background-color: rgb(124, 201, 52);
    }
    .layout.float .center {
      background-color: rgb(201, 52, 156);
    }
  </style>
  <article>
    <h1>三栏布局</h1>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h2>浮动解决方案</h2>
      这是三栏布局的浮动解决方案
    </div>
  </article>
</section>
